import React, { Component, PureComponent } from "react";

function MyFunctionComponent() {
  return <h4>我是函数组件</h4>;
}

class MyPureComponent extends PureComponent {
  render(): React.ReactNode {
    return <h4>我是PureComponent组件</h4>;
  }
}

class MyClassComponent extends Component {
  render(): React.ReactNode {
    return <h4>我是类组件</h4>;
  }
}

/**
 * 判断一个组件是函数组件还是类组件
 * @returns ReactNode
 */
const JudgeComponentOrFC: React.FC = () => {
  const component1 = <MyClassComponent />;
  const component2 = <MyFunctionComponent />;
  const component3 = <MyPureComponent />;
  const component4 = <div>我是div元素</div>;

  console.log({ component1, component2, component3, component4 });

  const printComponentName = (Component: JSX.Element): string => {
    if (typeof Component.type !== "function") {
      return Component.type;
    } else if (Component.type.prototype.isPureReactComponent) {
      return "PureComponent";
    } else if (Component.type.prototype.isReactComponent) {
      return "ReactComponent";
    }
    return "FunctionComponent";
  };

  return (
    <>
      <h3>判断是一个组件是函数组件还是类组件</h3>
      <p>component1: {printComponentName(component1)}</p>
      <p>component2: {printComponentName(component2)}</p>
      <p>component3: {printComponentName(component3)}</p>
      <p>component4: {printComponentName(component4)}</p>
    </>
  );
};
export default JudgeComponentOrFC;
